<template>
	<view class="content">
		<ZPaging ref="paging" v-model="list" :auto="false" :auto-show-system-loading="true"
			loading-more-no-more-text="沒有更多了" loading-more-default-text="點擊加載更多" loading-more-loading-text="正在加載..."
			loading-more-fail-text="加載失敗,點擊重新加載" empty-view-text="沒有數據哦~" refresher-default-text="繼續下拉刷新"
			refresher-pulling-text="鬆開立即刷新" refresher-refreshing-text="正在刷新" empty-view-reload-text="重新加載"
			empty-view-error-text="加載失敗" @query="queryList">
			<template #top>
				<NavBar title="检查表庫與模塊" :autoBack="false" id="nav">
					<template #left>
						<view class="navbar-left center" @click="goBack">
							<u-icon name="arrow-left" color="#007aff" size="34" ></u-icon>
						</view>
					</template>
				</NavBar>
			</template>
			<template #default>
				<view class="list">
					<view class="navbox">
						<u-subsection :list="nav" bg-color="#fff" button-color="#fff" v-model="current"
							@change="changeNav"></u-subsection>
					</view>
					<view class="search">
						<u-search :placeholder="placeholder" v-model="form_template_name" :showAction='false' @search="toSearch"></u-search>
					</view>
					<Template v-if="+current === 0" :list="list"></Template>
					<Fragment v-else :list="list"></Fragment>
				</view>
			</template>
		</ZPaging>
	</view>
</template>

<script>
	import ZPaging from "@/node_modules/z-paging/components/z-paging/z-paging.vue"
	import NavBar from "@/component/NavBar"
	import {
		getTemList,
		getModuleList
	} from "@/api/template.js"
	import Template from './template/index.vue'
	import Fragment from './fragment/index.vue'
	export default{
		name:'checkForm',
		components:{
			ZPaging,
			NavBar,
			Template,
			Fragment
		},
		data(){
			return {
				form_template_name:'',
				pageNo:'',
				pageSize:'',
				list:[],
				current:0,
				nav: [{
						name: '检查表庫',
						ident: 1,
					},
					{
						name: '模塊庫',
						ident: 2,
					},
				],
			}
		},
		computed:{
			placeholder(){
				return this.current === 0 ? '請輸入檢查表名稱' : '請輸入模版片段名稱'
			}
		},
		mounted(){
			this.$refs.paging.reload();
		},
		onShow() {
			this.$nextTick(() => {
				this.$refs.paging.reload();
			});
		},
		methods:{
			goBack() {
				uni.navigateBack(-1)
			},
			reload() {
				this.$refs.paging.reload();
			},
			changeNav(e) {
				this.current = e
				this.pageNo = 1
				this.pageSize = 10
				this.reload()
			},
			toSearch() {
				this.reload()
			},
			queryList(pageNo, pageSize) {
				this.pageNo = pageNo
				this.pageSize = pageSize
				if(this.current === 0){
					this.getTemList()
				}else{
					this.getModuleList()
				}
			},
			getTemList(){
				if(this.current === 0){
					let params = {
						uid: uni.getStorageSync("uid"),
						form_template_name:this.form_template_name,
						pageNo:this.pageNo,
						pageSize:this.pageSize
					}
					getTemList(params).then(res=>{
						let resData = res ||[]
						this.$refs.paging.complete(resData)
					})
				}else{
					console.log('請求模版片段')
					this.$refs.paging.complete([])
				}
			},
			// 模版片段
			getModuleList(){
				let params = {
					uid: uni.getStorageSync("uid"),
					form_template_module_name:this.form_template_name,
					pageNo:this.pageNo,
					pageSize:this.pageSize
				}
				getModuleList(params).then(res=>{
					let resData = res ||[]
					this.$refs.paging.complete(resData)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.navbox {
		margin: 0 auto 24rpx;
		/deep/ .u-item {
			position: relative;

			&::after {
				content: "";
				width: 2rpx;
				height: 32rpx;
				background-color: #f1f1f1;
				position: absolute;
				right: 0rpx;
			}

			&.u-item-3::after {
				display: none;
			}
		}

		/deep/ .u-item-bg {
			box-shadow: 0rpx 4rpx 4rpx rgba(0, 0, 0, .1);
		}
	}
	.list{
		padding: 90rpx 24rpx;
		.search{
			margin-bottom: 20rpx;
		}
		.list-warp{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 34rpx;
			.each{
				min-width: 700rpx;
				box-sizing: border-box;
				padding: 32rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #E7E7E7;
				.each-list{
					display: flex;
					justify-content: space-between;
					.title{
						font-weight: 400;
						font-size: 30rpx;
						color: #333333;
					}
					.des{
						font-weight: 400;
						font-size: 28rpx;
						color: #979797;
						margin:30rpx 0;
					}
					.count{
						font-weight: 400;
						font-size: 28rpx;
						color: #3A78FC
					}
				}
				.btns{
					display: flex;
					margin-top: 30rpx;
					gap: 28rpx;
					.btn{
						width: 156rpx;
						height: 58rpx;
						line-height: 58rpx;
						background: #FFFFFF;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						border: 2rpx solid #3A78FC;
						text-align: center;
						color: #3A78FC;
						cursor: pointer;
						&:first-child{
							background:#3A78FC;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
	.popup-content {
		padding-top: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: 300rpx;
	
		.popup-tips {
			font-size: 36rpx;
			text-align: center;
			color: red;
		}
	
		.popup-btns {
			display: flex;
			width: 100%;
			border-top: 1px solid #ebedf0;
	
			.btn {
				width: 50%;
				text-align: center;
				line-height: 88rpx;
				cursor: pointer;
	
				&:first-child {
					border-right: 1px solid #ebedf0;
					color: #323233;
				}
	
				&:last-child {
					color: red;
				}
			}
		}
	}
</style>